<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给你的一封情书</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
    <!-- 预加载背景图片 -->
    <link rel="preload" href="A.PNG" as="image">
</head>
<body>
    <!-- 加载动画 -->
    <div id="loading-screen" class="loading-screen">
        <div class="loading-content">
            <div class="loading-heart">💖</div>
            <p class="loading-text">正在为你准备浪漫的惊喜...</p>
            <div class="loading-bar">
                <div class="loading-progress"></div>
            </div>
        </div>
    </div>

    <!-- 飘落的爱心背景 -->
    <div class="hearts-container">
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
    </div>

    <!-- 主要内容 -->
    <div class="container">
        <!-- 标题部分 -->
        <header class="header">
            <h1 class="main-title">致我最珍贵的你</h1>
            <p class="subtitle">从小学到高中，从青涩到成熟</p>
        </header>

        <!-- 时间轴部分 -->
        <section class="timeline">
            <div class="timeline-item">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h3>小学时光</h3>
                    <p>那时的我们还很青涩，六年级坐在同一间教室里，你总是那么认真地听课，偶尔回头对我微笑。那些纯真的日子，是我最美好的回忆。</p>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h3>成长岁月</h3>
                    <p>一起走过的路，一起分享的秘密，一起哭过笑过的时光。你见证了我的成长，我也陪伴着你的每一个重要时刻。</p>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h3>高中相遇</h3>
                    <p>当我们再次在同一所高中相遇时，我知道这是命运的安排。我们不再是小孩子，但那份纯真的感情却从未改变。</p>
                </div>
            </div>
        </section>

        <!-- 表白内容 -->
        <section class="confession">
            <div class="confession-content">
                <h2 class="confession-title">❤️ 我想对你说 ❤️</h2>
                <div class="love-letter">
                    <div class="letter-envelope">
                        <div class="letter-paper">
                            <p class="letter-opening">亲爱的你：</p>
                            <p class="letter-paragraph">从小学的课桌到高中的教室，从青涩的孩童到如今的少年，我们一起走过了这么多美好的岁月。</p>
                            <p class="letter-paragraph">在这些年里，我慢慢发现，你不仅仅是我的发小，更是我心中最特别的那个人。</p>
                            <p class="letter-paragraph">尽管我们没有在同一个班级里，但我总是忍不住想你，一有时间就会去找你。</p>
                            <p class="letter-paragraph">也许我不是最帅的，但我的心意是最真挚的。</p>
                            <p class="letter-paragraph">你的笑容像阳光一样照亮我的世界，你的话语像春风一样温暖我的心房。</p>
                            <p class="letter-paragraph">我想告诉你，我喜欢你，不仅仅是因为我们从小一起长大，更是因为你就是你——</p>
                            <p class="letter-paragraph">那个善良、美丽、聪慧的你。</p>
                            <p class="letter-ps">P.S. 无论你的答案是什么，我都希望能继续陪伴在你身边，一起跑步，一起分享生活的点滴。</p>
                            <p class="letter-closing">永远爱你</p>
                            <p class="letter-signature">小小</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 按钮部分 -->
        <section class="buttons">
            <button class="btn btn-yes" onclick="showResponse('yes')">我愿意 💕</button>
            <button class="btn btn-no" onclick="showResponse('no')">让我想想 💭</button>
        </section>

        <!-- 响应弹窗 -->
        <div id="response-modal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal()">&times;</span>
                <div id="response-text"></div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
